
/**
 * 画柱状 + 折线图
 *
 * @author  yangjinlai 20200217
 * zhaoying 20200827 从人事管理h5迁移至理顾宝-资产配置
 */

import drawEcharts from './drawEcharts.js'
import drawColor from './drawColor.js'
import drawTable from './drawTable.js'

//that -- 传进来的Vue，也就是this
//options -- 传进来的各种配置，包括：
//id -- 图表容器
//xData -- x轴数据
//yNum: y轴数量
//sBar: 柱状图配置，柱状图有默认配置defaultBarConfig，画图的数据需要传进来，两个会合在一起，如果有想重置默认配置的，也可以一起传进来
//sLine：折线图配置，折线图有默认配置defaultLineConfig，画图的数据需要传进来，另外如果有右边第二个y轴的话，需要传进来哪个数据用于第二个y轴
function drawBarLine( that, options ){

	//默认柱状配置
	let defaultBarConfig = {
		type: 'bar',
		yAxisIndex: 0,
		itemStyle: {
		    barBorderRadius: [50, 50, 0, 0],
		},
		barMaxWidth: that.$fontSize(1.08)
	}

	//默认折线配置
	let defaultLineConfig = {
		type: 'line',
		symbol: 'none', //隐藏折线图上的圆圈
	}
	//整体的默认配置
	let obj = {
	    color: options.color ? drawColor.barLineColor[options.color] : drawColor.barLineColor.type_1,
	    xAxis : {
			type : 'category',
			axisLabel :{
				rotate: options.xAxis.rotate ? options.xAxis.rotate : '',
				interval: 0
			},
	    },
	    yAxis : [],
	    series: [],
	    grid: options.grid ? options.grid : {},
	    legend: options.legend ? options.legend : {},
	}
	//如果需要俩个x轴 设置为数组 (咱们俩个x轴只是为了解决 2020第一周 这种数据的展示问题)
	if(options.xAxis.length){
		obj.xAxis = []
	}

	//将obj和drawEcharts合并
	let echartsObj = that.$utils.objCombine({} , drawEcharts.defaultObj( that ) );

	//给当前图表类型设置一个总类型
	echartsObj.echartsType = 'barLine';

	echartsObj = that.$utils.objCombine(echartsObj , obj );

	// 当存在2个x轴时 echartsObj.xAxis里面需要分别合并配置
	if(options.xAxis.length){
		echartsObj.xAxis[0] = that.$utils.objCombine(options.xAxis[0] , drawEcharts.xAxis( that ) );
		echartsObj.xAxis[1] = that.$utils.objCombine(options.xAxis[1] , drawEcharts.xAxis( that ) );
		if(options.xAxis[1].axisLabel.formatter){//判断是否单独设置了字体的显示方法 如果设置了 就用options.xAxis[1]里的配置
			echartsObj.xAxis[1].axisLabel.formatter = options.xAxis[1].axisLabel.formatter
		}
	}else{
		//合并x轴，x轴配置需要单独合并

		echartsObj.xAxis = that.$utils.objCombine(echartsObj.xAxis , drawEcharts.xAxis( that ) );

		echartsObj.xAxis = that.$utils.objCombine(echartsObj.xAxis , options.xAxis );
	}

	//y轴，默认先设置一个
	echartsObj.yAxis[0] = drawEcharts.yAxis( that );

	if ( options.yNum == 2) {
		//如果有2个y轴，再设置一个
		echartsObj.yAxis[1] = that.$utils.objCombine({position: 'right'} , drawEcharts.yAxis( that ) );

		//第2个y轴的splitLine需要处理
		echartsObj.yAxis[1].splitLine = {
			show: false
		}

		// 设置第二个Y轴显示%,等标识
		echartsObj.yAxis[1].axisLabel.formatter=options.yUnit ? '{value}'+options.yUnit :'{value}'
	}
	//series处理
	options.sBar.forEach((item, index, arr) => {

		let barConfig = that.$utils.objCombine( defaultBarConfig, item );

		echartsObj.series.push(barConfig);
	})

	options.sLine.forEach((item, index, arr) => {

		let barConfig = that.$utils.objCombine( defaultLineConfig, item );

		echartsObj.series.push(barConfig);
	})

	//legend 折线图的线条使用自定义的-
	//如果要展示图例，每条数据的name是一定要写的，根据这个name进行后续的处理
	if( (echartsObj.legend && echartsObj.legend.show == true) || that.$utils.getType(echartsObj.legend) == 'Array' ){

		let leg = {
			itemGap : 0
		};

		let nameFind = [],
			richObj = {},
			data = [],
			sData = [];

		echartsObj.series.forEach((item, index, arr) => {

			if( item.type == 'line'){

				//折线图的
				nameFind.push( {
					name: item.name ,
					index: index,
					type: item.type,
				});

				richObj['line_' + index] = {
					color: echartsObj.color[index],
					// fontSize: that.$fontSize(0.18),
				}

				data.push({
					name: item.name,
					icon: 'none',
				})
			}
			else{
				data.push({
					name: item.name,
				})

			}

			richObj['barLegendAfter'] = {
				color: 'transparent',
				// fontSize: that.$fontSize(0.18),
			}

			sData.push({
				name: item.name,
				type: item.type,
				data: item.data.concat([])
			})

		})

		leg.formatter = function(name){

			let returnNameIndex = '';

			nameFind.forEach((i) => {
				if( i.name == name){
					returnNameIndex = i.index;
				}
			})

			//找到了，这是折线，添加index_returnNameIndex 的rich
			if( returnNameIndex ){
			    return '{line_'+ returnNameIndex + '|—} '+ name
			}
			else{
				//非折线
				let barIndex = '';
				sData.forEach((m, n) =>{
					if( m.name == name){
						barIndex = n;
					}
				})

				//判断后面一条是否为柱状
				if( (barIndex === 0 || !!barIndex) && sData[barIndex+1] && sData[barIndex+1].type == 'bar'){
					return name + '{barLegendAfter|—} ';
				}
				else {
					return name ;
				}
			}
        }

        !leg.textStyle && ( leg.textStyle = {} );

		leg.textStyle.rich = richObj;


		// if( options.calculateLegend ){


			//判断当前屏幕是否能一行放的下所有legend
			//一行legend，包括data的每一个值及前面的图标及后面的间距（柱状有间距，折线的没有）
			let wrapperWidth = options.id.getDom().offsetWidth - 10 -10;

			let char = '';
			data.forEach((x,y,z) =>{
				char += 'x' + x.name ;
				if( (y+1) != data.length){
					char += 'xx';
				}
			})

			//所有legend的长度总和
			let fontNum = Number(char.length) * Number(that.$fontSize(0.24));

			if( wrapperWidth < fontNum ){
				//一行放不下，计算需要放几行

				let dLegend = echartsObj.legend;

				echartsObj.legend = [];

				let realData = [];
				let newChar = '';
				options.line = 0;
				let mc = '';

				data.forEach((x,y,z) =>{
					newChar += 'x' + x.name ;

					mc += 'x' + x.name ;

					if( (y+1) != data.length){
						//加上后一个
						mc += 'xx' + data[y+1].name  ;
						newChar += 'xx';
					}

					realData.push(x)

					//到这里超出了
					if( Number(mc.length) * that.$fontSize(0.24) > wrapperWidth ){

						!echartsObj.legend[options.line] && (echartsObj.legend[options.line] = {});

						echartsObj.legend[options.line].data = realData.concat([]);

						echartsObj.legend[options.line] = that.$utils.objCombine( echartsObj.legend[options.line], dLegend );

						echartsObj.legend[options.line] = that.$utils.objCombine( echartsObj.legend[options.line], leg );

						realData = [];
						mc = '';
						newChar = '';
						options.line += 1;
					}
					else{
						//没有超出，但是如果后面没其他的了
						if( (y+1) == data.length){

							!echartsObj.legend[options.line] && (echartsObj.legend[options.line] = {});

							echartsObj.legend[options.line].data = realData.concat([]);
							// echartsObj.legend[options.line].top = that.$fontSize(0.4);

							echartsObj.legend[options.line] = that.$utils.objCombine( echartsObj.legend[options.line], dLegend );

							echartsObj.legend[options.line] = that.$utils.objCombine( echartsObj.legend[options.line], leg );

							options.line += 1;
						}
					}
				})

			}
			else{
				echartsObj.legend.data = data;
				echartsObj.legend = that.$utils.objCombine( echartsObj.legend, leg );
			}

		// }


	}

	//是否需要放大功能
	if( options.dataZoom ){
		echartsObj.dataZoom = options.dataZoom
	}

	//展示图例，且gird.bottom的底部距离是没有legend的位置，且不需要展示table时
    // 图表放大时，如果图例比较多，会出现重叠的现象
    // 图表放大时，设置了固定的bottom=20%，当length图例一行放不下时，需要重新赋值bottom的值，区分于页面正常展示的样式
	if( options.legend && options.legend.show && (echartsObj.grid.bottom == '5%' || echartsObj.grid.bottom == '20%') && !options.table){

        let gLine = options.line;

		if( that.$utils.getType(echartsObj.legend) == 'Array' ){


			let num = 0.24;

			echartsObj.legend.forEach((x, y, z) => {
				x.bottom = this.$fontSize(num) * options.line;
				options.line -= 1;
				num -= 0.14;
			})

            if (echartsObj.grid.bottom == '20%') {
                echartsObj.grid.bottom = this.$fontSize(0.9) * (gLine + 1);
            } else {
                echartsObj.grid.bottom = this.$fontSize(0.3) * ( gLine + 2);
            }

		}
		else{

            if (echartsObj.grid.bottom == '20%') {
                 // 图表放大时 bottom=20% 如果length一行能展示完全 不需要再设置bottom
            } else {
                // 页面展示图表时，一行展示，设置bottom
                echartsObj.grid.bottom = this.$fontSize(0.9)
            }

		}

		// echartsObj.grid.bottom = this.$fontSize(0.9) ;
	}

	//如果要展示表格
	if( options.table ){
		let dColor = options.color ? options.color : 'type_1';
		drawTable(options.id, dColor, echartsObj);
	}



	// console.log( 'barLIne', echartsObj )

	//画图
	options.id.setOption(echartsObj)



}

export default drawBarLine
